<!--
 * @Author: zhangyang
 * @Date: 2023-12-27 15:38:04
 * @LastEditTime: 2023-12-27 15:40:50
 * @Description:
-->
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { Autoplay, Navigation, Pagination } from 'swiper/modules'
import { ref } from 'vue'
import type { Swiper as SwiperClass } from 'swiper'
import { MediaType } from '../enum/index'

defineProps<{
  banners: SwiperItem[]
}>()
const swiperContainer = ref<SwiperClass>()
const modules = [Navigation, Pagination, Autoplay]
function videoPlay() {
  swiperContainer.value?.autoplay?.pause()
}
function videoPause() {
  swiperContainer.value?.autoplay?.start()
}
function onSwiper(swiper: SwiperClass) {
  swiperContainer.value = swiper
}
</script>

<template>
  <Swiper
    ref="swiperContainer" :modules="modules" :autoplay="banners.length > 1" :delay="3000" :loop="banners.length > 1"
    :space-between="50" class="relative" :navigation="banners.length > 1"
    :pagination="{ clickable: true }" @swiper="(s) => onSwiper(s)"
  >
    <SwiperSlide v-for="(item, index) in banners" :key="`${index}sd`">
      <img v-if="item.isVideo === MediaType.img" :src="item.url" class="w-full mx-auto">
      <video v-if="item.isVideo === MediaType.video" controls :src="item.url" class="w-full mx-auto" @play="videoPlay" @pause="videoPause" />
    </SwiperSlide>
  </Swiper>
</template>

<style>
.swiper-button-prev {
  position: absolute;
  top: 40%;
  left: -16px;
  color: white;
  background-color: #333;
  padding: 40px 30px;
  border-radius: 0 16px 16px 0;
  transform: scale(0.6)
}

.swiper-button-next {
  position: absolute;
  top: 40%;
  color: white;
  right: -16px;
  padding: 40px 30px;
  transform: scale(0.6);
  border-radius: 16px 0 0 16px;
  background-color: #333;
}

.swiper-pagination-bullet {
  background-color: #fff;
}
</style>
